<!DOCTYPE html>
<html>

<head>
	<meta charset="ISO-8859-1">
	
	<script type="text/javascript" src="../js/processing.js"></script>

	<title>Processing 2 JS Example</title>
</head>

<body>

<!-- draw processing sketch -->
	<canvas data-processing-sources="../pde/miscEx/miscEx.pde" id="pdeSketch"></canvas>
	
<!-- create slider input -->
	<div id="interface" style="width: 800px; height: 100px;">
	<input type="range" class="colorslider" min="0" max="255" value="10" step="1" onChange="updateColor(this.value)"/>
	</div>
	
<!-- create function "updateColor" that accesses function within pde sketch "changeBGColor", according id "pdeSketch" -->
	<script type="text/javascript">
		var processingInstance;
		function updateColor(newValue){
		//console.log("SLIDER: " + newValue);
		processingInstance = Processing.getInstanceById('pdeSketch');
		processingInstance.changeBGColor(newValue);
		}
	</script>




</body>
</html>